<template>
	<view class="container">
		<block v-if="isload">
			<form @submit="formSubmit" @reset="formReset">
				<view class="form">
					<view class="form-item">
						<text class="label">开户行</text>
						<picker class="picker" mode="selector" name="bankname" value="0" :range="banklist"
							@change="bindBanknameChange">
							<view v-if="bankname">{{bankname}}</view>
							<view v-else>请选择开户行</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="label">所属分支行</text>
						<input type="text" class="input" placeholder="请输入分支行" name="bankaddress"
							:value="userinfo.bankaddress" placeholder-style="color:#BBBBBB;font-size:28rpx"></input>
					</view>
					<view class="form-item">
						<text class="label">持卡人姓名</text>
						<input type="text" class="input" placeholder="请输入持卡人姓名" name="bankcarduser"
							:value="userinfo.bankcarduser" placeholder-style="color:#BBBBBB;font-size:28rpx"></input>
					</view>
					<view class="form-item">
						<text class="label">银行卡号</text>
						<input type="text" class="input" placeholder="请输入银行卡号" name="bankcardnum"
							:value="userinfo.bankcardnum" placeholder-style="color:#BBBBBB;font-size:28rpx"></input>
					</view>
				</view>
				<button class="set-btn" form-type="submit" :style="{background:''+t('color2')+''}">保 存</button>
			</form>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,

				banklist: ['工商银行', '农业银行', '中国银行', '建设银行', '招商银行', '邮储银行', '交通银行', '浦发银行', '民生银行', '兴业银行', '平安银行', '中信银行',
					'华夏银行', '广发银行', '光大银行', '北京银行', '宁波银行'
				],
				bankname: '',
				userinfo: {},
				textset: {},
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.isload = true
			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		methods: {
			getdata: function() {
				var that = this;
				that.loading = true;
				app.get('My/set', {}, function(data) {
					that.loading = false;
					that.userinfo = data.userinfo;
					that.bankname = data.userinfo.bankname;
					that.loaded();
				});
			},
			formSubmit: function(e) {
				var formdata = e.detail.value;
				var bankname = this.bankname
				var bankcarduser = formdata.bankcarduser
				var bankcardnum = formdata.bankcardnum
				var bankaddress = formdata.bankaddress
				if (bankname == '') {
					app.alert('请选择开户行');
					return;
				}
				app.showLoading('提交中');
				app.post("My/setfield", {
					bankname: bankname,
					bankaddress: bankaddress,
					bankcarduser: bankcarduser,
					bankcardnum: bankcardnum
				}, function(data) {
					app.showLoading(false);
					if (data.status == 1) {
						app.success(data.msg);
						setTimeout(function() {
							app.goback(true);
						}, 1000);
					} else {
						app.error(data.msg);
					}
				});
			},
			bindBanknameChange: function(e) {
				this.bankname = this.banklist[e.detail.value];
			},
		}
	};
</script>
<style>
	.form {
		width: 94%;
		margin: 20rpx 3%;
		border-radius: 5px;
		padding: 20rpx 20rpx;
		padding: 0 3%;
		background: #FFF;
	}

	.form-item {
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 1px #ededed solid;
		height: 98rpx;
		line-height: 98rpx;
	}

	.form-item:last-child {
		border: 0
	}

	.form-item .label {
		color: #000;
		width: 200rpx;
	}

	.form-item .input {
		flex: 1;
		color: #000;
	}

	.form-item .picker {
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 0;
		flex: 1;
		color: #000;
	}

	.set-btn {
		width: 90%;
		margin: 60rpx 5%;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 48rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
</style>